<template>
    <div class="dynamic_deta">
        <div class="lemon-sidebar__scroll dynamic_content">
            <div class="title">{{ $t('cir.朋友圈') }}</div>
            <div class="dynamic_view">
                <div class="item">
                    <div class="avatar">
                        <img :src="detail.user_info.avatar" />
                    </div>
                    <div class="deta">
                        <div class="name">{{ detail.user_info.nickname }}</div>
                        <div class="content">{{ detail.content }}</div>

                        <IndexCover :list="detail.images" v-if="detail.images.length" />
                        <IndexVideo :src="detail.video" v-if="detail.video" />

                        <div class="oper">
                            <div class="time">
                                <span>{{ detail.time_text }}</span>
                                <img src="@/assets/image/del.png" @click="removeMoment"
                                    v-if="detail.user_id == user.user_id" />
                            </div>
                            <div class="oper_view">
                                <div class="oper_more" @click.stop="like">
                                    <img src="@/assets/image/d2.png" v-if="detail.is_liked" />
                                    <img src="@/assets/image/d1.png" v-else />
                                    <span>{{ $t('cir.赞') }}</span>
                                </div>

                                <div class="oper_more" @click.stop="reply_msg()">
                                    <i class="el-icon-chat-dot-round" style="font-size: 18px;"></i>
                                    <span>{{ $t('cir.评论') }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="comment">
                    <div class="personnel" v-if="like_list.length">
                        <div class="image_view">
                            <img src="@/assets/image/d4.png" class="icon" />
                        </div>

                        <div class="name_list">
                            <img :src="item.avatar" v-for="item in like_list" :key="item.user_id"
                                @click="router(item.user_id)" />
                        </div>
                    </div>

                    <div class="msg_list" v-if="list.length">
                        <div class="msg_item" v-for="(item, index) in list" :key="item.id"
                            @click.stop="reply_msg(item)">
                            <img class="msg_avatar" :src="item.avatar" />
                            <div class="msg_other">
                                <div class="msg_top">
                                    <div class="msg_user_name">
                                        <span class="msg_name">{{ item.nickname }}</span>
                                        <span class="reply" v-if="item.reply_user">{{ $t('cir.回复') }}</span>
                                        <span class="msg_name" v-if="item.reply_user">
                                            {{ item.reply_user.nickname }}
                                        </span>

                                    </div>
                                    <span class="msg_time">
                                        {{ formatTime(item.created_at) }}
                                    </span>
                                </div>
                                <div v-html="emojiToHtml(item.content)" class="msg_value"></div>
                            </div>

                            <img src="@/assets/image/del.png" class="del_msg" @click.stop="removeMsg(item, index)"
                                v-if="item.user_id == user.user_id" />
                        </div>
                    </div>
                </div>

                <div class="page_view">
                    <el-pagination background layout="prev, pager, next" hide-on-single-page :current-page="page"
                        :total="total" @current-change="change" />
                </div>
            </div>
        </div>

        <div class="reply_view" v-if="reply_show">
            <div class="reply_content">
                <div class="reply_head">
                    <el-popover placement="top" width="400" trigger="click">
                        <div class="lemon-sidebar__scroll popover_emo_view">
                            <div class="emo_item" v-for="(item, index) in emoList" :key="index">
                                <img :src="item.src" mode="widthFix" lazy-load @click.stop="chooseEmoji(item)">
                            </div>
                        </div>
                        <img src="@/assets/image/i1.png" alt="" class="oper_item" slot="reference">
                    </el-popover>
                    <div>{{ reply_title }}</div>
                    <i class="el-icon-circle-close" style="font-size: 24px;" @click="reply_show = false"></i>
                </div>

                <editor v-if="reply_show" v-model="editor_value" :init="init"></editor>
            </div>
            <div class="submit" @click="submit">{{ $t('my.保存') }}</div>
        </div>
    </div>
</template>

<script>
import {
    mapState
} from 'vuex';
import dayjs from 'dayjs';
import IndexCover from "@/components/my/IndexCover.vue"
import IndexVideo from "@/components/my/IndexVideo.vue"

import tinymce from 'tinymce/tinymce'
import Editor from '@tinymce/tinymce-vue'

// 引入必要的插件和主题
import 'tinymce/themes/silver'
import 'tinymce/icons/default'
import 'tinymce/models/dom'

import emoji from '@/utils/emoji.js'
export default {
    components: {
        IndexCover,
        IndexVideo,
        Editor
    },
    computed: {
        ...mapState({
            user: state => state.user,
        })
    },
    data() {
        return {
            emoList: [],

            moment_id: null,

            background: "",

            detail: {
                user_info: {
                    nickname: ""
                },
                images: [],
                video: null
            },
            like_list: [],

            page: 1,
            list: [],
            total: 0,
            page_size: 10,


            reply_show: false,
            reply_title: "",

            reply_item: null,

            editor: null,
            editor_value: "",

            init: {
                language_url: '/tinymce/langs/zh_CN.js',
                language: 'zh_CN',
                license_key: 'gpl',
                license_key_manager: false,
                height: 300,
                max_height: 300,
                statusbar: false,
                toolbar: false,
                branding: false,
                menubar: false,
                forced_root_block: false,
                setup: (editor) => {
                    this.editor = editor
                }
            },
        }
    },
    async created() {
        this.moment_id = this.$route.query.id;

        this.emoList = emoji[0]['children'];
        let emojiMap = [];
        emoji.forEach(function (item) {
            let child = item.children;
            if (child.length > 0) {
                child.forEach(function (val) {
                    let name = val.name;
                    let src = val.src;
                    emojiMap[name] = src;
                })
            }
        });
        this.emojiMap = emojiMap;

        const data = await this.$api.momentApi.momentDetail({
            moment_id: this.moment_id
        });
        this.detail = data;
        this.like_list = data.like_users;
        this.getList()
    },

    methods: {
        async getList() {
            const moment_id = this.moment_id;
            let {
                list: res
            } = await this.$api.momentApi.commentList({
                moment_id,
                page: this.page,
                page_size: this.page_size
            });
            this.total = res.total;
            this.list = res.data;
        },
        change(value) {
            this.page = value;
            this.getList();
        },
        removeMoment() {
            this.$confirm(this.$t('common.确定删除该动态吗'), this.$t('msg.提示'), {
                confirmButtonText: this.$t('msg.确定'),
                cancelButtonText: this.$t('msg.取消'),
                type: 'warning'
            }).then(async () => {
                await this.$api.momentApi.delete({
                    moment_id: this.detail.id
                })
                this.$message({
                    type: "success",
                    message: this.$t('操作成功')
                });
                setTimeout(() => this.$router.back(), 1500);
            }).catch(() => { });
        },
        async like() {
            let item = this.detail;
            if (item.is_liked) {
                let index = item.like_users.findIndex(user => user.user_id == this.user.user_id);

                await this.$api.momentApi.likeDelete({
                    moment_id: item.id
                });
                item.like_users.splice(index, 1);
            } else {
                await this.$api.momentApi.like({
                    moment_id: item.id
                });
                item.like_users.push({
                    avatar: this.user.avatar,
                    user_id: this.user.user_id,
                    nickname: this.user.nickname
                })
            }
            item.is_liked = !item.is_liked;
            this.detail = item;
        },

        reply_msg(item) {
            if (item) {
                this.reply_item = item;
                this.reply_title = this.$t('cir.回复') + ':' + item.nickname;

                this.reply_show = true;
            } else {
                this.reply_item = null;
                this.reply_title = this.$t('cir.发表评论');
                this.reply_show = !this.reply_show;
            }
        },

        chooseEmoji(item) {
            if (!this.editor) return;
            let imgHtml = '<img src="' + item.src + '" style="width:18px;height:18px;margin:0 2px;" />';
            this.editor.insertContent(imgHtml);
        },
        replaceEmojiTagsComplete(htmlString) {
            let result = htmlString.replace(/<img[^>]*src="[^"]*\/([^\/]+)\.png"[^>]*>/g, '[!$1]');
            result = result.replace(/<\/?p>/g, '');
            return result;
        },
        async submit() {
            let cnt = this.editor.getContent();
            if (cnt.trim() == '') {
                this.$message({
                    type: "error",
                    message: this.$t('my.请输入内容')
                });
                return
            }
            cnt = this.replaceEmojiTagsComplete(cnt);

            await this.$api.momentApi.comment({
                moment_id: this.moment_id,
                content: cnt,
                parent_id: this.reply_item?.id,
                reply_user_id: this.reply_item?.user_id
            });

            this.$message({
                type: "success",
                message: this.$t('msg.操作成功')
            });
            this.reply_show = false;
            this.editor_value = '';
            if (this.list.length < this.page_size) this.getList();
        },

        removeMsg(item, index) {
            this.$confirm(this.$t('common.确定删除该评论吗'), this.$t('msg.提示'), {
                confirmButtonText: this.$t('msg.确定'),
                cancelButtonText: this.$t('msg.取消'),
                type: 'warning'
            }).then(async () => {
                await this.$api.momentApi.commentDelete({
                    comment_id: item.id
                });
                this.list.splice(index, 1);
                this.$message({
                    type: "success",
                    message: this.$t('操作成功')
                });
            }).catch(() => { });
        },
        router(id) {
            if (id == this.user.user_id) {
                this.$router.push({
                    name: 'myDynamic'
                })
            } else {
                this.$router.push({
                    name: 'singleUserDynamic',
                    query: { id }
                })
            }
        },

        emojiToHtml(str) {
            const emojiMap = this.emojiMap;
            str = str.replace(/\[!(\w+)\]/gi, function (str, match) {
                var file = match;
                return emojiMap[file] ?
                    "<img style=\"width:12px;height:12px;margin:0 2px;\" emoji-name=\""
                        .concat(match, "\" src=\"").concat(emojiMap[file], "\" />") : "[!".concat(match, "]");
            });
            str = '<span class="rich_text">' + str + '</span>';
            return str;
        },

        formatTime(time) {
            if (!time) return '';
            return dayjs(time).format('MM月DD日 HH:mm');
        }
    }
}
</script>


<style lang="scss">
.popover_emo_view {
    width: 420px;
    height: 220px;
    // border-radius: 10px;
    margin-top: 10px;
    border: 1px solid #ccc;
    display: flex;
    flex-wrap: wrap;
    overflow-y: auto;

    .emo_item {
        width: 44px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;

        img {
            width: 22px;
            height: 22px;
        }
    }
}
</style>
<style lang="scss" scoped>
:deep(.tox-tinymce) {
    height: 100px !important;
    // border-bottom-left-radius: 0;
    // border-bottom-right-radius: 0;
    // border: 1px solid #ccc;
    border: none;
}

:deep(.tox-edit-area::before) {
    border: none !important;
}

.dynamic_deta {
    min-width: 100%;
    height: 100%;
    border-radius: 10px 10px 0 0;
    padding: 24px;
    box-sizing: border-box;
    background: #FCFCFE;
    position: relative;
    overflow: hidden;

    .reply_view {
        width: 544px;
        padding-bottom: 24px;
        box-sizing: border-box;
        background-color: #fff;
        position: absolute;
        left: 50%;
        bottom: 0;
        z-index: 99;
        transform: translateX(-50%);

        .reply_content {
            border: 1px solid #ccc;
            border-bottom: none;
            box-sizing: border-box;
            border-radius: 8px;
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;

            .reply_head {
                padding-right: 16px;
                border-bottom: 1px solid #ccc;
                box-sizing: border-box;
                display: flex;
                justify-content: space-between;
                align-items: center;
                cursor: pointer;

                .oper_item {
                    width: 46px;
                    height: 46px;
                }
            }

        }



        .submit {
            width: 544px;
            height: 52px;
            line-height: 52px;
            text-align: center;
            font-weight: bold;
            font-size: 20px;
            color: #FFFFFF;
            background: linear-gradient(270deg, #4488FF 0%, #2BBCFF 100%);
            border-radius: 8px;

            border-top-left-radius: 0;
            border-top-right-radius: 0;
            margin: 0 auto;
            margin-top: 0px;
        }
    }

    .dynamic_content {
        height: 100%;
        overflow-y: auto;
    }

    .title {
        font-weight: bold;
        font-size: 20px;
        color: #333333;
        padding-bottom: 16px;
    }

    .dynamic_view {
        width: 544px;
        margin: 0 auto;
        padding: 0 15px 15px;
        box-sizing: border-box;
        background: #FFFFFF;
        box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.1);
        border-radius: 4px 4px 4px 4px;

        .item {
            display: flex;
            padding: 15px 0;
            overflow: hidden;

            &:last-child {
                border-bottom: none;
            }

            .avatar {
                width: 40px;
                height: 40px;
                border-radius: 5px;
                overflow: hidden;

                img {
                    width: 100%;
                    height: 100%;
                }
            }

            .deta {
                flex: 1;
                padding-left: 10px;
                box-sizing: border-box;

                .name {
                    height: 25px;
                    font-weight: 400;
                    font-size: 16px;
                    color: #4A5F7C;
                    line-height: 25px;
                }

                .content {
                    font-weight: 400;
                    font-size: 16px;
                    color: #333333;
                    line-height: 24px;

                    padding: 3px 0;
                }

                .oper {
                    margin-top: 5px;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;

                    .time {
                        display: flex;
                        align-items: center;

                        span {
                            font-weight: 400;
                            font-size: 13px;
                            color: #999999;
                        }

                        img {
                            width: 16px;
                            height: 16px;
                            margin-left: 5px;
                        }
                    }

                    .oper_view {
                        display: flex;
                        align-items: center;

                        .oper_more {
                            // width: 40px;
                            height: 20px;
                            margin-left: 8px;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            cursor: pointer;

                            img {
                                width: 18px;
                                height: 18px;
                            }

                            span {
                                font-weight: 400;
                                font-size: 14px;
                                color: #999999;
                                margin-left: 4px;
                            }
                        }
                    }
                }
            }
        }


        .comment {
            margin-top: 10px;
            background: #F7F7F7;

            .personnel {
                border-bottom: 1px solid #E5E5E5;
                padding: 0 8px 5px;
                box-sizing: border-box;
                display: flex;
                align-items: center;

                .image_view {
                    width: 30px;
                    height: 65px;
                    display: flex;
                    justify-content: center;
                    align-items: center;

                    img {
                        width: 12px;
                        height: 11px;
                    }
                }

                .name_list {
                    flex: 1;
                    display: flex;
                    align-items: center;
                    flex-wrap: wrap;

                    img {
                        width: 33px;
                        height: 33px;
                        border-radius: 5px;
                        margin-right: 5px;
                        margin-top: 5px;
                    }
                }
            }

            .msg_list {
                padding: 0 8px 5px;
                box-sizing: border-box;


                box-sizing: border-box;
                overflow: hidden;

                .msg_item {
                    width: 100%;
                    border-top: 1px solid #E5E5E5;
                    // padding: 10px 8px;
                    padding: 10px 0;
                    box-sizing: border-box;
                    display: flex;
                    align-items: center;
                    overflow: hidden;

                    &:first-child {
                        border-top: none;
                    }

                    .msg_avatar {
                        width: 34px;
                        height: 34px;
                        border-radius: 5px;
                    }

                    .msg_other {
                        flex: 1;
                        min-height: 34px;
                        padding: 0 6px;
                        box-sizing: border-box;
                        overflow: hidden;

                        .msg_top {
                            width: 100%;

                            display: flex;
                            justify-content: space-between;
                            align-items: center;

                            .msg_user_name {
                                flex: 1;

                                overflow: hidden;
                                text-overflow: ellipsis;
                                white-space: nowrap;

                                .msg_name {
                                    font-weight: 400;
                                    font-size: 12px;
                                    color: #4A5F7C;
                                }

                                .reply {
                                    font-weight: 400;
                                    font-size: 12px;
                                    padding: 0 5px;
                                    box-sizing: border-box;
                                }

                            }

                            .msg_time {
                                width: 100px;
                                text-align: right;
                                font-weight: 400;
                                font-size: 10px;
                                color: #666666;
                            }
                        }


                        .msg_value {
                            font-size: 12px;
                            color: #333;

                            :deep(img) {
                                vertical-align: middle;
                            }
                        }



                    }

                    .del_msg {
                        width: 16px;
                        height: 16px;
                    }
                }
            }
        }
    }
}
</style>
